<script setup>
	import { ref, computed } from 'vue'
	// 导入组件
	import customPassword from '.././components/password.vue'
	import customMobile from '.././components/mobile.vue'
	import defaults from 'luch-request/src/lib/core/defaults'
	// 标签页要展示的内容
	const tabMetas = [
		{ title: '密码登录', subTitle: '验证码登录' },
		{ title: '验证码登录', subTitle: '密码登录' },
	]
	function onSubimt() {
		console.log(123)
	}

	// 标签页的索引值
	const tabIndex = ref(0)
	//  根据索引值决定当前标签展示的内容
	const tabMeta = computed(() => {
		return tabMetas[tabIndex.value]
	})
	// 切换标签页的索引值
	function onSubTitleClick() {
		// 0 和 1 互换的简单算法
		tabIndex.value = +!tabIndex.value
	}
	const isChecked = ref(null)
</script>
<script>
	export default { name: 'LoginIndexPage' }
</script>
<template>
	<view class="user-login">
		<view class="login-type">
			<view class="title">{{ tabMeta.subTitle }}</view>
			<view class="type">
				<text @click="onSubTitleClick">{{ tabMeta.title }}</text>
				<uni-icons color="#3c3e42" type="forward" />
			</view>
		</view>
		<view>
			<custom-mobile ref="isChecked" v-if="tabIndex === 0" />
			<custom-password v-if="tabIndex === 1" />
		</view>
	</view>
	<!-- 社交账号登录 -->
	<view class="social-login">
		<view class="legend">
			<text class="text">其它方式登录</text>
		</view>
		<view class="social-account">
			<view class="icon">
				<uni-icons color="#00b0fb" size="30" type="qq" />
			</view>
			<view class="icon">
				<uni-icons color="#fb6622" size="30" type="weibo" />
			</view>
			<view class="icon">
				<uni-icons color="#07C160" size="30" type="weixin" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
